<template>
    <div class="snow-page">
        <div class="snow-inner-page">
            <a-form :model="formData.form" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 18 }"
                ref="formRef">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item field="name" label="账号">
                            <a-input v-model="formData.form.username" placeholder="账号" allow-clear />
                        </a-form-item>

                    </a-col>

                    <a-col :span="6">
                        <a-space>
                            <a-button type="primary" @click="onSearch">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <template #default>查询</template>
                            </a-button>
                            <a-button @click="onReset">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                <template #default>重置</template>
                            </a-button>
                            <a-button type="primary" @click="onAdd">
                                <template #icon>
                                    <icon-PlusOutlined />
                                </template>
                                <template #default>新增</template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
            <a-table :data="tableData" row-key="id" size="small" bordered :pagination="false">
                <template #columns>

                    <a-table-column title="IP">
                        <template #cell="{ record }">
                            {{ record.ip }}

                        </template>
                    </a-table-column>
                    <a-table-column title="PORT">
                        <template #cell="{ record }">
                            {{ record.port }}
                        </template>
                    </a-table-column>
                    <a-table-column title="登录地址">
                        <template #cell="{ record }">
                            {{ record.login_url }}

                        </template>
                    </a-table-column>
                    <a-table-column title="账号">
                        <template #cell="{ record }">
                            {{ record.username }}

                        </template>
                    </a-table-column>
                    <a-table-column title="操作" align="center" fixed="right">
                        <template #cell="{ record }">
                            <a-space>
                                <a-button size="mini" type="primary" @click="onEdit(record)">修改</a-button>
                                <a-button size="mini" type="primary" status="danger"
                                    @click="onDelete2(record)">删除</a-button>
                            </a-space>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
            <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
        </div>



        <a-modal v-model:visible="visible" :footer="false" width="40%">
            <template #title>
                新增服务
            </template>
            <div>
                <a-form ref="formRef" :model="form" @submit="handleSubmit">
                    <a-form-item field="ip" label="ip" :rules="[{ required: true, message: 'ip不能为空' }]">
                        <a-input v-model="form.ip" placeholder="请输入ip" />
                    </a-form-item>

                    <a-form-item field="login_url" label="登录地址" :rules="[{ required: true, message: '登录地址不能为空' }]">
                        <a-input v-model="form.login_url" placeholder="请输入登录地址" />
                    </a-form-item>
                    <a-form-item field="port" label="PORT" :rules="[{ required: true, message: 'port不能为空' }]">
                        <a-input v-model="form.port" placeholder="请输入port" />
                    </a-form-item>
                    <a-form-item field="username" label="账号" :rules="[{ required: true, message: '账号不能为空' }]">
                        <a-input v-model="form.username" placeholder="请输入账号" />
                    </a-form-item>
                    <a-form-item field="pwd" label="密码" :rules="[{ required: true, message: '密码不能为空' }]">
                        <a-input-password v-model="form.pwd" placeholder="请输入密码" />
                    </a-form-item>
                    <!-- <a-form-item field="password" label="加密密码" :rules="[{ required: true, message: '加密密码不能为空' }]">
                        <a-input-password v-model="form.password" placeholder="请输入加密密码" />
                    </a-form-item> -->

                    <a-form-item>
                        <a-space>
                            <a-button html-type="submit">提交</a-button>
                            <a-button @click="$refs.formRef.resetFields()">重置</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { Modal, Message } from "@arco-design/web-vue";
import { getserverUrlAPI, deleteserverUrlAPI, addserverUrlAPI, updateserverUrlAPI } from "@/api/modules/server/index"

import { onMounted } from "vue";

const formData = reactive({
    form: {
        username: "",
    },
    paged: 1,
    pageSize: 10
});
const visible = ref(false)
const total = ref(0)
const tableData = ref([]);
const form = reactive({
    login_url: "",
    ip: "",
    port: "",
    username: "",
    pwd: "",
    password: "",
    id: ""
})

onMounted(() => {
    init();
});
async function init() {
    let obj = {
        paged: formData.paged,
        pageSize: formData.pageSize
    }
    let res = await getserverUrlAPI(obj, formData.form);
    total.value = 0
    tableData.value = [];
    if (res.status == 2) {
        total.value = res.data.totalCount;
        tableData.value = res.data.data;
    }
}
const formRef = ref();
const onReset = () => {
    formRef.value.resetFields();
    init();
};

function changePage(page) {

    formData.paged = page;
    init()
}

function onSearch() {
    init();
}

function onAdd() {
    form.login_url = ""
    form.ip = ""
    form.port = ""
    form.username = ""
    form.pwd = ""
    form.password = ""
    form.id = undefined
    visible.value = true
}

function onEdit(val) {
    form.login_url = val.login_url
    form.ip = val.ip
    form.port = val.port
    form.username = val.username
    form.pwd = val.pwd
    form.password = val.password
    form.id = val.id
    visible.value = true
}


const handleSubmit = async ({ values, errors }) => {
    console.log('values:', values, '\nerrors:', errors)
    if (errors) {
        return
    }
    if (form.id) {
        let res = await updateserverUrlAPI(values) as any
        if (res.status == 2) {
            Message.success("操作成功")
        } else {
            Message.error(res.statusMsg)
        }
    } else {
        let res = await addserverUrlAPI(values) as any
        if (res.status == 2) {
            Message.success("操作成功")
        } else {
            Message.error(res.statusMsg)
        }
    }
    init();
    visible.value = false
}

const onDelete2 = (row: any) => {
    Modal.warning({
        title: "提示",
        content: "确定删除？",
        hideCancel: false,
        closable: true,
        onOk: async () => {
            try {
                let res = (await deleteserverUrlAPI(row.id)) as any;
                if (res.status == 2) {
                    Message.success("删除成功");
                } else {
                    Message.error(res.statusMsg);
                }
                init();
            } catch { }
        }
    });
};
</script>

<style lang="scss" scoped></style>